import React, { useEffect, useState } from "react";
import { Avatar, Image as MyImage, NavBar } from "antd-mobile";
import { useNavigate } from "react-router";
import $fetch from "../../../utils/app/$fetch";
import axios from "axios";
import "./style.scss";

const PersonList = () => {
  const [personList, setPersonList] = useState([]);
  const navigate: any = useNavigate();

  useEffect(() => {
    initPage();
  }, []);

  const initPage = async () => {
    const res: any = await $fetch("member/inf");

    setPersonList(res);
  };

  // 当 personList 数据更新时进行图片预加载
  useEffect(() => {
    if (personList.length > 0) {
      personList.forEach((member: any) => {
        const img: any = new Image();
        img.src = member?.memberFormulPhoto;
      });
    }
  }, [personList]);

  const back = () => {
    window.history.go(-1);
  };

  return (
    <div className="container_person_list">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={back}
      >
        成员列表
      </NavBar>
      <ul className="detail_wraper">
        {personList?.map((member: any) => {
          return (
            <li
              key={member?.memberId}
              onClick={() => {
                navigate("/person/detail", {
                  state: { memberId: member?.memberId },
                });
              }}
            >
              <MyImage
                src={member?.memberFormulPhoto}
                width="100%"
                height="150px"
                fit="cover"
                lazy={true}
              />
              <h3>{member?.memberName}</h3>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default PersonList;
